<template>
    <div class="waitConfirmed">
        <div class="searchBox search-box-layout">
            <Row :gutter="24">
                <Col span="4">
                <div>
                    <p class="label">计划名称</p>
                    <div class="ipt">
                        <Input type="text" v-model="searchParams.planName" :placeholder="`${$t('common.inputInfo')}`"
                            clearable class="inputBorder" :maxlength="999"></Input>
                    </div>
                </div>
                </Col>
                <Col span="4">
                <div>
                    <p class="label">{{ $t('点检级别') }}</p>
                    <div class="ipt">
                        <Select v-model="searchParams.planLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
                            <Option v-for="item of levelList" :value="item.name" :key="item.key" :label="item.name">
                            </Option>
                        </Select>
                    </div>
                </div>
                </Col>

                <Col span="4">
                <div>
                    <p class="label">状态</p>
                    <div class="ipt">
                        <Select v-model="searchParams.status" clearable :placeholder="`${$t('common.selectInfo')}`">
                            <Option value="0" label="启用"></Option>
                            <Option value="1" label="禁用"></Option>
                        </Select>
                    </div>
                </div>
                </Col>
                <Col span="4" style="display:flex;flex-direction:column;justify-content: flex-end;">
                <div class="t-c">
                    <div class="ipt">
                        <Button class="search-btn" type="primary" @click="changeNum">
                            {{ $t('common.Query') }}
                        </Button>
                        <Button class="reset-btn" @click="reset()">{{
                            $t('common.reset') }}
                        </Button>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <slot name="btns">
                </slot>
                <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
            </div>
            <div class="tableContent">
                <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="selection"
                    :columns="columns" :data="data" @on-selection-change="onSelectChange">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" v-if="row.status === '1'" @click="disabled(row)">
                            <i class="iconfont zy-common-bianji"></i>
                            {{ $t('启用') }}
                        </span>
                        <span class="operationBtn" v-if="row.status === '0'" @click="disabled(row)">
                            <i class="iconfont zy-common-bianji"></i>
                            {{ $t('common.disable') }}
                        </span>
                        <span class="operationBtn" @click="look(row)"><i class="iconfont zy-common-chakan"></i>{{
                            $t('common.Check') }}</span>
                        <span class="operationBtn" @click="edit(row)"><i class="iconfont zy-common-bianji"></i>{{
                            $t('common.Edit') }}</span>
                        <span class="operationBtn" @click="deleteRow(row)"><i class="iconfont zy-common-shanchu"></i>{{
                            $t('common.Delete') }}</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" :selected="delIds.length" />
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                <span>删除后不会继续生成点检任务，是否确认删除？</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="delLoading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: 'waitConfirmed',
    mixins: [toggleTableOperation],
    props: ['device', 'effPlanList', 'effPlanTotal', 'planIds'],
    data() {
        return {
            customCacheKey: "planefficaciouswaitConfirmed",
            deviceTypeList: [],
            deviceNameList: [],
            text: '',
            planId: '',
            delId: '',
            delIds: this.planIds,
            status: '',
            disabledStatus: '',
            total: this.effPlanTotal,
            pageSize: 10,
            pageNum: 1,
            pageSizeOption: [10, 20, 30, 40],
            delLoading: false,
            delFaultCodeShowF: false,//是否显示删除弹窗
            confirmFaultCodeShowF: false,
            disabledLoading: false,
            create: false,
            actualShowF: false,
            searchParams: {},
            formItem: {},
            formInline: {
                disableCycle: null,
                reason: ''
            },
            ruleValidate: {
                disableCycle: [
                    { required: true, type: 'number', message: "请输入禁用周期", trigger: "blur" },
                ]
            },
            levelList: [
                { name: "一级点检", key: 1 },
                { name: "二级点检", key: 2 },
                { name: "三级点检", key: 3 },
            ],
            columns: [
                {
                    type: 'selection',
                    align: 'center',
                    width: 60
                },
                {
                    title: "计划名称",
                    key: 'planName',
                    width: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                },
                {
                    title: `${this.$t('点检级别')}`,
                    key: "planLevel",
                    minWidth: 160,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                },
                {
                    title: "触发条件",
                    key: 'planCycle',
                    minWidth: 150,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                    render: (h, params) => {
                        return h('div', params.row.planCycle + params.row.cycleUnit)
                    },
                },
                {
                    title: `${this.$t('首次生成时间')}`,
                    key: 'firstTime',
                    minWidth: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('计划截止时间')}`,
                    key: 'endTime',
                    minWidth: 200,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: "计划创建时间",
                    key: 'createTime',
                    minWidth: 190,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('创建人')}`,
                    key: 'realname',
                    minWidth: 160,
                    align: "center",
                    tooltip: true,
                    resizable: true
                },
                {
                    title: '状态',
                    key: 'status',
                    minWidth: 160,
                    align: "center",
                    tooltip: true,
                    resizable: true,
                    render: (h, params) => {
                        return h('div', params.row.status === '1' ? '禁用' : '启用')
                    },
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    fixed: 'right',
                    minWidth: this.util.autoWidth(400, 370),
                    align: 'center'
                },
            ],
            importExcelState: false,
            data: this.effPlanList,
            receivedataArr: [],
            position: []
        }
    },
    watch: {
        effPlanList(newVal) {
            this.data = newVal
        },
        effPlanTotal(newVal) {
            this.total = newVal
        },
        planIds(newVal) {
            this.delIds = newVal
        },
    },
    created() {
        this.getTableColumnsWidth(this.columns)
    },
    mounted() {
        this.getFaultCategory("设备类型")
    },
    methods: {
        importExcelChange(val) {
            this.importExcelState = false;
            if (val === "success") {
                this.$Message.success("导入成功");
                this.changeNum();
            }
        },
        //下载模板
        exportTemplate() {
            const filName = "有效计划下载模板";
            this.axios({
                method: "get",
                url: "/dms/dcmMaintainPlan/downloadTemplate",
                responseType: "blob",
            }).then((res) => {
                fileDownload(res, filName + ".xlsx");
            });
        },
        /*导入*/
        importExcelShow() {
            this.importExcelState = true;
        },
        deviceNameChange(val) {
            if (val) {
                this.searchParams.deviceType = val
            }
        },
        //获取故障数据
        getFaultCategory(name) {
            this.axios({
                method: 'get',
                url: '/dms/faultCategory/basicDict',
                params: { name }
            }).then(res => {
                if (res.code === 200) {

                    if (name === '故障分类') {
                        this.faultCategoryList = res.data.map(item => {
                            if (item.value) return item;
                        })
                    } else if (name === '设备类型') {
                        this.deviceTypeList = res.data.map(item => {
                            if (item.value) return item;
                        })
                    }
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                }
            })
        },
        onSelectChange(selection) {
            console.log(selection)
            let myArray = [];
            selection.map((item) => {
                myArray.push(item.id);
            });

            this.delIds = myArray;
        },
        deleteOk() {
            this.delLoading = true
            if (this.status == 0) {
                this.axios({
                    method: 'post',
                    url: '/dms/moldSpotCheckPlan/delByIds',
                    data: [this.delId]
                }).then(res => {

                    if (res.code === 200) {
                        this.searchList()
                        this.$Message.success(({ content: '删除成功！', duration: 2, closable: true }));
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                    }
                }).finally(() => {
                    this.delLoading = false
                    this.delFaultCodeShowF = false
                })
            } else {
                this.axios({
                    method: 'delete',
                    url: '/dms/dcmMaintainPlan/deleteBatch',
                    params: {
                        ids: this.delIds.toString()
                    }
                }).then(res => {

                    if (res.code === 200) {
                        this.searchList()
                        this.$Message.success(({ content: '批量删除成功！', duration: 2, closable: true }));
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                    }
                }).finally(() => {
                    this.delLoading = false
                    this.delFaultCodeShowF = false
                })
            }
        },
        confirm(row) {
            //点击展示提示删除弹窗
            this.confirmFaultCodeShowF = true;
            this.planId = row.id
            this.disabledStatus = 0
            console.log(row, 'row')
        },
        deleteRow(row) {
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.delId = row.id
            this.status = 0
            console.log(row, 'row')
        },
        handleBatchDelete() {
            console.log('批量')
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.status = 1
        },
        handleBatchDisabled() {
            this.disabledStatus = 1
            this.confirmFaultCodeShowF = true
        },
        disabledCancel() {
            this.confirmFaultCodeShowF = false
            this.$refs.disabledPlanValidate.resetFields()
        },
        disabledOk() {
            if (this.disabledStatus == 0) {
                let data = {
                    planId: this.planId,
                    disableCycle: this.formInline.disableCycle,
                    reason: this.formInline.reason,
                }
                this.$refs.disabledPlanValidate.validate(valid => {
                    if (valid) {
                        this.disabledLoading = true
                        this.axios({
                            method: 'post',
                            url: '/dms/dcmMaintainDisableRecord/disable',
                            data
                        }).then(res => {

                            if (res.code === 200) {
                                this.searchList()
                                this.$Message.success(({ content: '禁用成功！', duration: 2, closable: true }));
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        }).finally(() => {
                            this.confirmFaultCodeShowF = false
                            this.disabledLoading = false
                            this.$refs.disabledPlanValidate.resetFields()
                        })
                    }
                })
            } else {
                let data = {
                    planIds: this.delIds.toString(),
                    disableCycle: this.formInline.disableCycle,
                    reason: this.formInline.reason,
                }
                this.$refs.disabledPlanValidate.validate(valid => {
                    if (valid) {
                        this.disabledLoading = true
                        this.axios({
                            method: 'post',
                            url: '/dms/dcmMaintainDisableRecord/batchDisable',
                            data
                        }).then(res => {

                            if (res.code === 200) {
                                this.searchList()
                                this.$Message.success(({ content: '批量禁用成功！', duration: 2, closable: true }));
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        }).finally(() => {
                            this.confirmFaultCodeShowF = false
                            this.disabledLoading = false
                            this.$refs.disabledPlanValidate.resetFields()
                        })
                    }
                })
            }


        },
        look(row) {
            this.$emit('changeDetailVisible', true, row.id)
        },
        getActualNum(row) {
            // if (this.permission.dcmMaintainDisableRecordList) {
            //     this.actualShowF = true
            //     this.getActualDetail(row.id)
            //     console.log(row, 'row')
            // }
            this.actualShowF = true
            this.getActualDetail(row.id)
        },
        disabled(row) {
            let params = {
                id: row.id,
                status:row.status == '1'?'0':'1',
            }
            this.axios({
                url: '/dms/moldSpotCheckPlan/updateStatusById',
                method: 'POST',
                params,
            }).then(res => {
                if (res.code === 200) {
                    this.changeNum();
                    this.$Message.success(res.msg);
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        getActualDetail(planId) {
            this.axios({
                method: 'get',
                url: '/dms/dcmMaintainDisableRecord/list',
                params: {
                    planId
                }
            }).then(res => {

                if (res.code === 200) {
                    this.receivedataArr = res.data
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            }).finally(() => {
            })
        },
        reset() {
            this.searchParams = {}
            this.$refs.CascaderInfo.value = []
            this.changeNum();
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams,
            };
            this.axios({
                method: 'post',
                url: '/dms/moldSpotCheckPlan/getMoldSpotCheckPlanList',
                data
            }).then(res => {

                if (res.code === 200) {
                    this.data = res.data.records
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        edit(row, str) {
            if (str === 'copy') {
                this.$store.commit('detail/SET_COPYSTATUS', true)
            } else {
                this.$store.commit('detail/SET_COPYSTATUS', false)
            }
            this.$emit('addMaintain', true, row)
        },
    },
}
</script>
